/* AI Delivery - Stages
   Used by: Views/Partials/blocklist/Components/aiDeliveryStagesBlock.cshtml */
.ai-st {
  --st-navy: #14256b;
  --st-orange: #ff9a45;
  --st-orange-soft: #f6c9a5;
  --st-text: #1b2a5b;
  --st-gutter: 6.8vw;
  --st-ring: 43.6vw;            /* dashed orbit diameter */
  --st-photo: 32.5vw;           /* photo circle diameter */
  --st-ease: cubic-bezier(.65, 0, .35, 1);
  --st-ease-out: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(560px, 54.7vw, 1400px);
  overflow: hidden;
  background: linear-gradient(90deg, #fffaf7 0%, #fff5ee 45%, #fde4d1 100%);
  padding: clamp(44px, 5.4vw, 140px) var(--st-gutter) clamp(44px, 5vw, 130px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--st-text);
  -webkit-font-smoothing: antialiased;
}
.ai-st *, .ai-st *::before, .ai-st *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ai-st__content {
  position: relative;
  z-index: 2;
  max-width: 69vw;
}
.ai-st__heading {
  max-width: 33vw;
  margin-bottom: clamp(12px, 1.2vw, 30px);
  font-size: clamp(22px, 1.75vw, 46px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--st-navy);
}
.ai-st__intro {
  max-width: 47vw;
  margin-bottom: clamp(18px, 1.9vw, 48px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .92vw, 24px);
  line-height: 1.6;
}

/* ---------- Tabs ---------- */
.ai-st__tabs-wrap {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-bottom: clamp(14px, 1.3vw, 34px);
  padding-top: clamp(10px, 1vw, 26px);
  border-top: 2px solid var(--st-orange-soft);
}
.ai-st__indicator {
  position: absolute;
  top: -3px;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--st-orange);
  border-radius: 2px;
  transition: transform .6s var(--st-ease), width .6s var(--st-ease);
}
.ai-st__tabs {
  display: flex;
  gap: clamp(20px, 3.4vw, 88px);
  list-style: none;
}
.ai-st__tab {
  padding: 4px 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: clamp(14px, 1.2vw, 31px);
  font-weight: 600;
  color: var(--st-navy);
  white-space: nowrap;
  cursor: pointer;
  opacity: .88;
  transition: opacity .35s ease, color .35s ease;
}
.ai-st__tab:hover { opacity: .9; }
.ai-st__tab.is-active { opacity: 1; }
.ai-st__tab:focus-visible { outline: 2px solid var(--st-orange); outline-offset: 4px; }

/* ---------- Panels (one per stage, crossfade) ---------- */
.ai-st__panels { display: grid; }
.ai-st__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .6s var(--st-ease-out), visibility 0s linear .45s;
}
.ai-st__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s ease .12s, transform .7s var(--st-ease-out) .12s, visibility 0s;
}

.ai-st__obj-label {
  margin-bottom: clamp(8px, .8vw, 20px);
  font-size: clamp(11px, .78vw, 20px);
  font-weight: 600;
  color: var(--st-orange);
}
.ai-st__obj {
  margin-bottom: clamp(16px, 1.6vw, 42px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .92vw, 24px);
  line-height: 1.6;
}
.ai-st__act-heading {
  margin-bottom: clamp(12px, 1.2vw, 30px);
  font-size: clamp(18px, 1.5vw, 40px);
  font-weight: 600;
  color: var(--st-navy);
}
.ai-st__acts {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .85vw, 22px);
  margin-bottom: clamp(22px, 2.4vw, 62px);
  list-style: none;
}
.ai-st__acts li {
  padding: 2px 0 2px clamp(10px, .8vw, 20px);
  border-left: 1.5px solid #f7b98a;
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .92vw, 24px);
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease;
}
.ai-st__panel.is-active .ai-st__acts li {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease var(--st-d, .2s), transform .6s var(--st-ease-out) var(--st-d, .2s), border-color .3s ease;
}
.ai-st__acts li:hover { border-left-color: var(--st-orange); }

.ai-st__meta {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .9vw, 22px);
}
.ai-st__meta p {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .92vw, 24px);
  line-height: 1.6;
}
.ai-st__meta strong {
  margin-right: .35em;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--st-navy);
}
.ai-st__meta .is-accent strong { color: var(--st-orange); }

/* ---------- Wheel: dashed orbit + numbers + photo circle ---------- */
.ai-st__wheel {
  position: absolute;
  top: 50%;
  right: calc(var(--st-ring) / -2);
  z-index: 1;
  width: var(--st-ring);
  height: var(--st-ring);
  transform: translateY(-50%);
  pointer-events: none;
}
/* short orange pointer line beside the active number (9 o'clock) */
.ai-st__pointer {
  position: absolute;
  top: 50%;
  right: calc(100% + 3.2vw);
  width: 4.3vw;
  height: 1.5px;
  background: var(--st-orange);
  transform: translateY(-50%);
}
.ai-st__orbit {
  position: absolute;
  inset: 0;
  transition: transform 1s var(--st-ease);
}
.ai-st__orbit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ai-st__num {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 6px 8px;
  background: none;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: clamp(16px, 1.36vw, 36px);
  font-weight: 600;
  color: var(--st-navy);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  /* sits on the orbit at angle --a (180deg = 9 o'clock); text follows the curve */
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--st-ring) * .41)) rotate(180deg);
  opacity: .9;
  transition: opacity .4s ease, color .3s ease;
}
.ai-st__num:hover { opacity: 1; color: var(--st-orange); }
.ai-st__num.is-active { opacity: 1; color: var(--st-navy); cursor: default; }

.ai-st__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--st-photo);
  height: var(--st-photo);
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #0b1430;
  box-shadow: 0 30px 60px -30px rgba(20, 37, 107, .45);
}
.ai-st__photo img,
.ai-st__photo .ai-st__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08) rotate(-4deg);
  transition: opacity .9s var(--st-ease), transform 1.4s var(--st-ease-out);
}
.ai-st__photo .is-active { opacity: 1; transform: none; }
/* desktop & laptop: the circle runs off the right edge, so slide the picture left
   by a quarter: its centre (the subject) then sits in the middle of the visible half */
@media (min-width: 901px) {
  .ai-st__photo img,
  .ai-st__photo .ai-st__ph {
    left: -25%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---------- SMALL LAPTOP / TABLET ---------- */
@media (max-width: 1200px) {
  .ai-st { --st-gutter: 32px; --st-ring: 46vw; --st-photo: 34vw; }
  .ai-st__content { max-width: 64vw; }
  .ai-st__heading { max-width: 44vw; }
  .ai-st__intro { max-width: 58vw; }
}

/* ---------- TABLET PORTRAIT & MOBILE: wheel on top, centred ---------- */
@media (max-width: 900px) {
  .ai-st { --st-gutter: 24px; --st-ring: min(78vw, 420px); --st-photo: min(50vw, 270px); min-height: 0; }
  .ai-st__wheel {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 32px;
    transform: none;
  }
  .ai-st__content { max-width: none; }
  .ai-st__heading, .ai-st__intro { max-width: none; }
  .ai-st__pointer { display: none; }
  .ai-st__tabs-wrap { width: auto; overflow-x: auto; scrollbar-width: none; }
  .ai-st__tabs-wrap::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
  .ai-st { --st-gutter: 20px; }
  .ai-st__tabs { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-st *, .ai-st *::before, .ai-st *::after { transition: none !important; }
}